//登陆页面应该设置验证

import React from 'react';
import './login.css';
import axios from 'axios';

export default class Login extends React.Component {
    state = {
        username: '',
        password: '',
        msg:''
    }

    componentDidMount(){
        //这里我要请求数据看看我的cookie是否跟服务器上的cookie值一致
        let cookie = document.cookie;
        console.log(cookie);
        cookie ? this.props.history.push('/'):console.log('请登录');
    }

    username = (e) => {
        this.setState({
            username: e.target.value
        });
    }

    password = (e) => {
        this.setState({
            password: e.target.value
        });
    }

    submit = () => {
        axios.post('/login', {
            "username": this.state.username,
            "password": this.state.password
        }).then((res) => {
            console.log(this.state.username,this.state.password)
            console.log(res);
            (res.data.code == '1') ? this.setState({msg:res.data.msg}) : this.props.history.push('/')
        })
    }

    render() {
        return (
            <div className='login'>
                <div className="trump"></div>
                <div className='login-box'>
                    <div className='login-title'>
                        登录
                    </div>
                    <div className='login-input'>
                        {/*账号 */}
                        <div className='username-box'>
                            <input className='username'
                                placeholder='用户名'
                                onChange={this.username}>
                            </input>
                        </div>
                        <div className='warning'>
                            <span>账号不能为空</span>
                        </div>
                        {/*密码 */}
                        <div className='pwd-box'>
                            <input type='password'
                                placeholder='密码'
                                onChange={this.password}>
                            </input>
                        </div>
                        <div className='warning'>
                            <span>密码不能为空</span>
                        </div>
                        <div className='btn'>
                            <button onClick={this.submit}>登录</button>
                        </div>
                    </div>
                </div>
                <div className="trump"></div>
            </div>
        )
    }
}